<!DOCTYPE html>
<html>
	<head>
		<!-- meta block -->
		<title>Diagram with Editor in org chart mode. Custom shapes - DHTMLX Diagram</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
		
		<link rel="shortcut icon" href="./common/favicon/favicon.ico" type="image/x-icon" />
		<link rel="icon" href="./common/favicon/icon-16.png" sizes="16x16" />
		<link rel="icon" href="./common/favicon/icon-32.png" sizes="32x32" />
		<link rel="icon" href="./common/favicon/icon-48.png" sizes="48x48" />
		<link rel="icon" href="./common/favicon/icon-96.png" sizes="96x96" />
		<link rel="icon" href="./common/favicon/icon-144.png" sizes="144x144" />
		<!-- end meta block -->	
		<link rel="stylesheet" href="./common/index.css?v=4.1.0">
		<!-- icons -->
		<link href="https://cdn.materialdesignicons.com/4.5.95/css/materialdesignicons.min.css?v=4.1.0" media="all" rel="stylesheet" type="text/css">
		<!-- Suite GPL -->
		<script src="https://cdn.dhtmlx.com/suite/edge/suite.js?v=4.1.0"></script>
		<link rel="stylesheet" href="https://cdn.dhtmlx.com/suite/edge/suite.css?v=4.1.0">
		<!-- custom sample head -->
		<script type="text/javascript" src="./common/data.js?v=4.1.0"></script>
		<script type="text/javascript" src="../codebase/diagramWithEditor.js?v=4.1.0"></script>
		<link rel="stylesheet" href="../codebase/diagramWithEditor.css?v=4.1.0">
		<style>
			html, body, .dhx_diagram {
				background: #fff;
			}
			.dhx_sample-container__without-editor {
				height: calc(100% - 121px);
			}
			.dhx_sample-container__with-editor {
				height: calc(100% - 61px);
			}
			.dhx_sample-widget {
				height: 100%;
			}
			.toggle_container {
				position: absolute;
				right: 2px;
				top: 10px;
				cursor: pointer;
				height: 20px;
				width: 20px;
			}
		</style>
		<!-- css template for DHTMLX Diagram -->
		<!-- the latest version is available here: https://snippet.dhtmlx.com/diagram_template_a -->
		<!-- you can find more css templates here: https://dhtmlx.com/docs/products/dhtmlxSuite/how-to-create-javascript-applications/ -->
		<style>
			.dhx_diagram_template_a_box {
				background-color: transparent;
			}
			.dhx_diagram_template_a_box {
				padding: 0;
				border: 1px solid #dfdfdf;
				background-color: #fff;
				overflow: hidden;
			}
			.dhx_diagram_template_a {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				width: 100%;
				height: 100%;
				padding: 12px;
			}
			.dhx_diagram_template_a__inside {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				width: 100%;
			}
			.dhx_diagram_template_a__picture {
				width: 90px;
				min-width: 90px;
				background: center center/cover no-repeat #f7f7f7;
			}
			.dhx_diagram_template_a__picture:before {
				content: "";
				display: block;
				padding-top: 100%;
			}
			.dhx_diagram_template_a__body {
				padding-left: 12px;
				min-width: 200px;
			}
			.dhx_diagram_template_a__title,
			.dhx_diagram_template_a__text {
				font: normal 14px/20px Roboto, sans-serif;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.dhx_diagram_template_a__title {
				text-align: start;
				color: rgba(0, 0, 0, 0.7);
				font-weight: 500;
			}
			.dhx_diagram_template_a__row {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				margin: 4px 0;
			}
			.dhx_diagram_template_a__icon {
				font-size: 18px;
				margin-right: 4px;
				color: rgba(0, 0, 0, 0.7);
			}
			.dhx_diagram_template_a__text {
				color: rgba(0, 0, 0, 0.7);
			}
			.dhx_diagram_template_a__link {
				color: #0288d1;
			}
		</style>
		<!-- end of code for diagram_template_a  -->
	</head>
	<body>
		<header class="dhx_sample-header">
			<div class="dhx_sample-header__main">
				<nav class="dhx_sample-header__breadcrumbs">
					<ul class="dhx_sample-header-breadcrumbs">
						<li class="dhx_sample-header-breadcrumbs__item">
							<a href="./index.html" class="dhx_sample-header-breadcrumbs__link">Back to Diagram samples</a>
						</li>
					</ul>
				</nav>
				<h1 class="dhx_sample-header__title">
					<div class="dhx_sample-header__content">
						Diagram with Editor in org chart mode. Custom shapes
					</div>
				</h1>
			</div>
		</header>
		<section id="control" class="dhx_sample-controls">
			<button class="dhx_sample-btn dhx_sample-btn--flat" onclick="runEditor()">Edit</button>
		</section>
		<section id="container" class="dhx_sample-container__without-editor">
			<div class="dhx_sample-widget" id="diagram"></div>
			<div class="dhx_sample-widget" id="editor" style="display: none;"></div>
		</section>
		<script>
			const diagram = new dhx.Diagram("diagram", {
				type: "org",
				defaultShapeType: "template"
			});
			
			const editor = new dhx.DiagramEditor("editor", {
				type: "org",
				shapeType: "template",
				controls: { 
					gridStep: false
				},
			});
			
			const template = ({ name, photo, post, phone, mail }) => (`
				<div class="dhx_diagram_template_a_box dhx_diagram_template_a">
					<div class="dhx_diagram_template_a__inside">
						<div class="dhx_diagram_template_a__picture" style="background-image: url(${photo});"></div>
						<div class="dhx_diagram_template_a__body">
							<div class="dhx_diagram_template_a__title">${name}</div>
							<div class="dhx_diagram_template_a__row">
								<span class="dhx_diagram_template_a__text">${post}</span>
							</div>
							<div class="dhx_diagram_template_a__row">
								<span class="dhx_diagram_template_a__icon mdi mdi-cellphone-android"></span>
								<span class="dhx_diagram_template_a__text">${phone}</span>
							</div>
							<div class="dhx_diagram_template_a__row">
								<span class="dhx_diagram_template_a__icon mdi mdi-email-outline"></span>
								<span class="dhx_diagram_template_a__text">
									<a class="dhx_diagram_template_a__link" href="mailto:${mail}" target="_blank">${mail}</a>
								</span>
							</div>
						</div>
						<div class="toggle_container">
							<span class="dhx_diagram_template_a__icon mdi mdi-dots-vertical"></span>
						</div>
					</div>
				</div>
			`);

			diagram.addShape("template", {
				template: template,
				defaults: {
					height: 115,
					width: 330
				},
				eventHandlers: {
					onclick: {
						"toggle_container": show,
					}
				},
			});

			editor.diagram.addShape("template", {
				template: template,
				defaults: {
					name: "Name and First name",
					post: "Position held",
					phone: "(405) 000-00-00",
					mail: "some@mail.com",
					photo: "./common/img/medical_workers/big-avatar-1.jpg",

					height: 115, width: 330
				},
				properties: [
					{ type: "position" },
					{ type: "size" },
					{ type: "text", label: "Name", property: "name" },
					{ type: "text", label: "Post", property: "post" },
					{ type: "text", label: "Phone", property: "phone" },
					{ type: "text", label: "Mail", property: "mail" },
					{ type: "img", label: "Photo",  property: "photo" }
				],
				eventHandlers: {
					onclick: {
						"toggle_container": show,
					}
				},
			});

			let item;

			diagram.events.on("ShapeClick", function (id) {
				item = diagram.data.getItem(id);
			});

			const contextMenu = new dhx.ContextMenu(null, {
				css: "dhx_widget--bg_gray"
			});

			contextMenu.data.parse([
				{
					"type": "menuItem",
					"id": "mail",
					"value": "Mail",
					"icon": "mdi mdi-email"
				},
				{
					"type": "menuItem",
					"id": "call",
					"value": "Call",
					"icon": "mdi mdi-phone"
				},
				{
					"type": "menuItem",
					"id": "site",
					"value": "Open Site",
					"icon": "mdi mdi-open-in-new"
				}
			]);

			contextMenu.events.on("click", function (id) {
				switch (id) {
					case "mail":
						window.open('mailto:' + item.mail + ',_blank');
						break;
					case "call":
						window.open('tel:' + item.phone + ',_blank');
						break;
					case "site":
						window.open('https://dhtmlx.com/docs/products/dhtmlxDiagram/', '_blank');
						break;
				}
			});

			let toggleItem;

			function show(event, shape) {
				event.preventDefault();
				contextMenu.showAt(event.target, "bottom");
			}

			const editorCont = document.querySelector("#editor");
			const diagramCont = document.querySelector("#diagram");
			const controls = document.querySelector("#control");
			const container = document.querySelector("#container");
			
			const WITH_EDITOR = "dhx_sample-container__with-editor";
			const WITHOUT_EDITOR = "dhx_sample-container__without-editor";

			function expand() {
				diagramCont.style.display = "none";
				controls.style.display = "none";
				editorCont.style.display = "block";
				container.classList.remove(WITHOUT_EDITOR);
				container.classList.add(WITH_EDITOR);
			}

			function collapse() {
				diagramCont.style.display = "block";
				controls.style.display = "flex";
				editorCont.style.display = "none";
				container.classList.remove(WITH_EDITOR);
				container.classList.add(WITHOUT_EDITOR);
			}

			function runEditor() {
				expand();
				editor.import(diagram);
			}

			editor.events.on("ApplyButton", function () {
				collapse();
				diagram.data.parse(editor.serialize());
			});

			editor.events.on("ResetButton", function () {
				collapse();
			});

			diagram.data.parse(medical_workers);
		</script>
	</body>
</html>
